<template>
    <div id="config">
        <div class="config-l">
            <div class="title">各项配置</div>
            <div class="item">
                <div class="item-l">步数兑换VCR :</div>
                <div class="item-r">
                   <el-input v-model="c1" type="number" min="0" placeholder="请输入步数"></el-input>
                </div>
            </div>
            <div class="item">
                <div class="item-l">糖果兑换VCR :</div>
                <div class="item-r">
                   <el-input v-model="c2" type="number" min="0" placeholder="请输入糖果"></el-input>
                </div>
            </div>
            <div class="item">
                <div class="item-l">VCR兑换总金股:</div>
                <div class="item-r">
                   <el-input v-model="c3" type="number" min="0" placeholder="请输入总金股"></el-input>
                </div>
            </div>
            <div class="item">
                <div class="item-l">实名等级 :</div>
                <div class="item-r">
                   <el-input v-model="auth" type="number" min="0" placeholder="请输入要求实名等级"></el-input>
                </div>
            </div>
            <div class="item">
                <div class="item-l">最多兑换步数 :</div>
                <div class="item-r">
                   <el-input v-model="step" type="number" min="0" placeholder="请输入最多兑换步数"></el-input>
                </div>
            </div>
            <div class="item">
                <div class="item-l">最多发布次数 :</div>
                <div class="item-r">
                   <el-input v-model="news" type="number" min="0" placeholder="请输入最多发布次数"></el-input>
                </div>
            </div>
            <div class="saveBtn"><span @click="saveconfiginfo">保存修改</span></div>
        </div>
        <div class="config-r">
            <div class="title">悬浮框广告设置</div>
            <div class="item">
                <div class="item-l">标题 :</div>
                <div class="item-r">
                   <el-input v-model="title" placeholder="请输入标题"></el-input>
                </div>
            </div>
            <div class="item">
                <div class="item-l">内容 :</div>
                <div class="item-r">
                   <el-input v-model="content" type="textarea" rows="3" placeholder="请输入内容"></el-input>
                </div>
            </div>
            <div class="item">
                <div class="item-l">图片 :</div>
                <div class="item-r img_sky_wrapper">
                    <div class="img_sky" v-for="(item,index) of imgUrl">
                        <img :src="'http://39.101.136.184:8080/upload/'+item" alt="">
                        <!-- <img :src="'http://47.106.64.123:8080/upload/'+item" alt=""> -->
                        <el-button class="deleteImg" @click="deleteImg(index)" type="danger" icon="el-icon-delete" circle></el-button>
                    </div>
                    <div class="img_sky"><img @click="showuploadimgModel" src="../../../assets/img/add.jpg" alt=""></div>
                </div>
            </div>
            <div class="saveBtn"><span @click="saveimgnfo">保存修改</span></div>
            <!-- 上传 模态框 -->
            <el-dialog
            title="上传图片"
            :visible.sync="showuploadimg"
            width="30%"
            center>
            <el-upload
                style="text-align:center"
                class="avatar-uploader"
                :action="actionUpload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img width="100%" v-if="imageUrl" :src="'http://39.101.136.184:8080/upload/'+imageUrl" class="avatar">
                <!-- <img width="100%" v-if="imageUrl" :src="'http://47.106.64.123:8080/upload/'+imageUrl" class="avatar"> -->
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="showuploadimg = false">取 消</el-button> -->
                <el-button type="primary" @click="saveImg_sky">确 定</el-button>
            </span>
            </el-dialog>
        </div>


    </div>
</template>

<script>
export default {
    data () {
        return {
            actionUpload:'http://39.101.136.184:8080',
            //actionUpload:'http://47.106.64.123:8080',
            dataListLoading: false,
            c1: '',//步数
            c2: '',//糖果
            c3: '',//总金股
            s1: -1,//总金股开关
            auth: '',//要求实名等级
            step: '',//最多兑换步数
            news: '',//最多发布次数
            title: '',//标题
            content: '',//内容
            id: '',
            imageUrl:'',
            imgUrl: [],//图片
            showuploadimg:false,
        }
    },
    methods: {
        // 开关
        changeSwitch (val) {
        },
        // 获取配置修改 数据
        getconfiginfo () {
            this.dataListLoading = true
            this.$http({
            url: this.$http.adornUrl('/common/config/info'),
            method: 'post',
            }).then(({data}) => {
            if (data && data.code == 200) {
                this.c1 = data.msg.c1,//步数
                this.c2 = data.msg.c2,//糖果
                this.c3 = data.msg.c3,//总金股
                this.s1 = String(data.msg.s1),//总金股开关
                this.auth = data.msg.auth,//要求实名等级
                this.step = data.msg.step,//最多兑换步数
                this.news = data.msg.news//最多发布次数
            }
            this.dataListLoading = false
            })
        },
        // 保存配置修改
        saveconfiginfo () {
            const c1 = this.c1
            const c2 = this.c2
            const c3 = this.c3
            const s1 = Number(this.s1)
            const auth = this.auth
            const step = this.step
            const news = this.news
            console.log(s1)
            if(c1 ==''||c2==''||c3==''||auth==''||step==''||news==''){
                this.$message.error('内容不能为空!')
            }else{
                this.$http({
                url: this.$http.adornUrl('/common/config/update'),
                method: 'post',
                data: this.$http.adornData({
                    'c1': c1,
                    'c2': c2,
                    'c3': c3,
                    's1': s1,
                    'auth': auth,
                    'step': step,
                    'news': news
                })
                }).then(({data}) => {
                    console.log(data)
                    if (data && data.code == 0) {
                        this.$message.success("修改成功!")
                        this.getconfiginfo()
                    }else{
                        this.$message.error(data.msg)
                    }
                })
            }
        },
        saveimgnfo (){
            const title = this.title
            const content = this.content
            const url = this.imgUrl
            const id = this.id
            if(title =='' || content==''|| url.length==0){
                this.$message.error('内容不能为空!')
            }else{
                this.$http({
                url: this.$http.adornUrl('/common/advertisement/update'),
                method: 'post',
                data: this.$http.adornData({
                    'title': title,
                    'content': content,
                    'url': JSON.stringify(url),
                    'id': id
                })
                }).then(({data}) => {
                    console.log(data)
                    if (data && data.code == 0) {
                        this.$message.success("修改成功!")
                        this.getAdvertisementinfo()
                    }else{
                        this.$message.error(data.msg)
                    }
                })
            }
        },
        showuploadimgModel(){
            this.showuploadimg = true
            this.imageUrl = ''
        },
        // 上传图片确定按钮  赋值
        saveImg_sky(){
            const list = this.imgUrl
            list.push(this.imageUrl)
            this.imgUrl = list
            this.showuploadimg = false
        },
        handleAvatarSuccess(res, file) {
            // this.imgUrl = URL.createObjectURL(file.raw);
            console.log(res)
            if(res.code == 200){
                const list = res.msg[0]
                console.log(list)
                this.imageUrl = list
            }

        },
        beforeAvatarUpload(file) {
            let isLt10M = file.size / 1024 / 1024 < 10; //设定图片上传 大小限制
            let reg = /\.(jpg|jpeg|png)$/i;
            if (!reg.test(file.name)) {
                this.$message({
                    showClose: true,
                    message: '上传支持格式（.jpg/.jpeg/.png）',
                    type: 'error'
                });
                return false;
            }else if (!isLt10M) {
                this.$message.error('上传图片大小不能超过 10MB!');
                return false;
            }
        },
        deleteImg(index){
            // console.log(index)
            const imgUrl = this.imgUrl
            imgUrl.splice(index,1)
            this.imgUrl = imgUrl
        },
        // 获取悬浮广告 数据
        getAdvertisementinfo () {
            this.dataListLoading = true
            this.$http({
            url: this.$http.adornUrl('/common/advertisement/float'),
            method: 'post',
            }).then(({data}) => {
            if (data && data.code == 200) {
                this.title = data.msg.title
                this.content = data.msg.content
                this.id = data.msg.id
                this.imgUrl = data.msg.url
            }
            this.dataListLoading = false
            })
        },
    },
    mounted () {
        this.getconfiginfo()
        this.getAdvertisementinfo()
        this.actionUpload = this.$http.adornUrl(`/common/file/upload?token=${this.$cookie.get('token')}`)
    }
}
</script>

<style scoped>
    #config{
        color: #333;
        font-size: 16px;
        display: flex;
    }
    #config>div{
        width: 50%;
        box-shadow: 0 0 1px 2px #f2f2f2
    }
    .title{
        line-height: 2;
        background: #f2f2f2;
        padding-left: 10px
    }
    .config-l{
        height: 100%;
        margin-right: 30px;
        padding-bottom: 20px
    }
    .item{
        display: flex;
        /* margin-bottom: 20px; */
        padding-top: 20px;
        padding-right: 10px
    }
    .item-l{
        width: 130px;
        padding-left: 10px;
        line-height: 2.2;
    }
    .item-r{
        flex: 1;
        padding-left: 10px
    }
    .img_sky{
        width: 100px;
        height: 100px;
        border:1px solid #fff;
        position: relative;
        overflow: hidden;
    }
    .img_sky>img{
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    .img_sky_wrapper{
        display: flex;
        flex-wrap: wrap
    }
    .config-r .item-l{
        width: 100px;
    }
    .saveBtn{
        text-align: center
    }
    .saveBtn>span{
        display: inline-block;
        background: #17B3A3;
        color: #fff;
        border:1px solid #17B3A3;
        border-radius: 30px;
        padding: 10px 100px;
        cursor: pointer;
        margin-top: 20px
    }
    .saveBtn>span:hover{
        opacity: .8;
    }
    .deleteImg{
        position: absolute;
        top: 0;
        right: 0;
        display: none;
        font-size: 16px;
        opacity: .8;
        padding: 5px !important;
    }
    .img_sky:hover .deleteImg{
        display: block
    }
    .img_sky img{
        transition: all .5s
    }
    .img_sky:hover img{
        transform: scale(1.2,1.2)
    }

</style>
<style>

    .el-upload{
        font-size:30px
    }
</style>
